/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
    <van-pull-refresh v-model="isLoading">

        <div class="TopList">

            <router-link to="/HomePage">
                <van-icon class="Backlink"
                          name="arrow-left" />
            </router-link>

            <span> 产品详情 </span>

        </div>
        <div class="title-name">
            <h4 class="title-name-h4">乌金猪</h4>
        </div>
        <div class="outline"></div>

        <div>
            <van-list class="help-son"
                      v-model="loading"
                      :finished="finished"
                      finished-text=" "
                      @load="onLoad">
                <div class="hello-4"
                     v-for="(itemlist, index) in Piglist"
                     :key="index"
                     :class="[itemlist.id !=0? 'gray':'']">

                    <div class="hello-4-bottom">
                        <div class="show-one">
                            <div class="show-one-1">
                                <h4>{{itemlist.Money}}</h4>
                                <p class="color-2">金额(元/只)</p>
                            </div>
                            <div class="show-one-2">
                                <h4>{{itemlist.Number}}头</h4>
                                <p class="color-2 adddistance">数量</p>
                            </div>
                            <div class="show-one-3">
                                <h4 id="show-num">{{itemlist.Month}}</h4>
                                <p class="color-2">期限(月)</p>
                            </div>
                        </div>
                        <div class="length">
                            <van-progress color="#75DEA7"
                                          :percentage="itemlist.Schedule"
                                          style="height: 0.213rem;" />
                        </div>
                        <div class="show-one-4">
                            <span>已售445头/</span>
                            <span class="text-color">共500头</span>
                            <span class="text-left"> 已售89.00%</span>
                        </div>
                        <div class="choose-num">
                            <span class="choose-num-1">选择数量:</span>
                            <span class="choose-num-2"
                                  @click="addnumber(5,'')"
                                  :class="[checkedGroup==5?'addactive':'']">5</span>
                            <span class="choose-num-2"
                                  @click="addnumber(10,'')"
                                  :class="[checkedGroup==10?'addactive':'']">10</span>
                            <span class="choose-num-2"
                                  @click="addnumber(15,'')"
                                  :class="[checkedGroup==15?'addactive':'']">15</span>
                            <span class="choose-num-2"
                                  @click="addnumber(20,'')"
                                  :class="[checkedGroup==20?'addactive':'']">20</span>
                            <van-field v-model="filling"
                                       class="num-List"
                                       label=""
                                       placeholder="请输入数量"
                                       @input="addnumber(filling,'write')" />

                        </div>
                        <div class="total-price">
                            <span class="total-price-size">总价：</span>

                            <span class="total-price-size  total-price-color">￥</span>
                            <span class=" total-price-size-2  total-price-color"> {{calculate}}.00</span>

                        </div>
                    </div>
                </div>
                <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            </van-list>
        </div>

        <!-- 中间秒杀图片 -->
        <van-tabs color=#37CD87
                  title-active-color=#37CD87
                  sticky
                  @click="showtoast">
            <van-tab title="产品详情">
                <div class="hello-1-details"
                     v-for="(item, index) in detailsimages"
                     :key="index">
                    <van-image class="hello-1-details-img"
                               width="100%"
                               height="auto"
                               :src="item.imgSrc" />

                </div>
                <div class="filler"> </div>

            </van-tab>

            <van-tab title="购买记录">
                <van-list v-model="loading"
                          :finished="finished"
                          finished-text="没有更多了">

                    <div class="record-list"
                         v-for="(item,index) in listRecord"
                         :key="index"
                         :title="item">
                        <div class="record-list-left">
                            <div class="all-list-left">
                                <h5 class="name-h5">{{ formatName(item.pigname)}}</h5>
                                <p class="time-p">{{item.time}} </p>
                            </div>

                        </div>

                        <div class="record-list-right">
                            {{item.pignumber}}头
                        </div>
                    </div>

                    <!-- listRecord: [{ id: 0, name: "111", time: "2020-02-29", number: "1" }], -->
                </van-list>

            </van-tab>
            <van-tab title="本期排行榜">
                <van-list v-model="loading"
                          :finished="finished"
                          finished-text="没有更多了">

                    <div class="current-list"
                         v-for="(item,index) in listRecord"
                         :key="index"
                         :title="item">
                        <div class="current-list-number">{{item.id+1}}</div>
                        <div class="current-list-left">

                            <div class="all-list-left">
                                <h5 class="name-h5">{{formatName(item.pigname)}}</h5>
                                <p class="time-p">{{item.time}} </p>
                            </div>

                        </div>

                        <div class="current-list-right">
                            {{item.pignumber}}头
                        </div>
                    </div>

                    <!-- listRecord: [{ id: 0, name: "111", time: "2020-02-29", number: "1" }], -->
                </van-list>
            </van-tab>

        </van-tabs>

        <div class="lastadd"
             @click="Buy()"> 立即抢购</div>

    </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";

import { Dialog } from "vant";
// eslint-disable-next-line no-unused-vars
import { Toast } from "vant";

export default {
    components: {
        TabBar
    },
    // eslint-disable-next-line space-before-function-paren
    data() {
        return {
            count: 0,
            isLoading: false,
            index: 0,
            bannerimages: [
                { id: 0, imgSrc: require("../assets/images/a16.jpg") }
                // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
            ],
            detailsimages: [
                { id: 0, imgSrc: require("../assets/images/detailsimg1.jpg") },
                { id: 1, imgSrc: require("../assets/images/detailsimg2.jpg") }
            ],
            listRecord: [
                {
                    id: 0,
                    pigname: "12",
                    time: "2020-02-29 10:52:07",
                    pignumber: "3"
                },
                {
                    id: 1,
                    pigname: "1112323132132",
                    time: "2020-02-29 10:52:08",
                    pignumber: "2"
                },
                {
                    id: 2,
                    pigname: "113",
                    time: "2020-02-29 10:52:09",
                    pignumber: "1"
                },
                {
                    id: 3,
                    pigname: "114",
                    time: "2020-02-29 10:52:09",
                    pignumber: "1"
                },
                {
                    id: 4,
                    pigname: "115",
                    time: "2020-02-29 10:52:09",
                    pignumber: "1"
                },
                {
                    id: 5,
                    pigname: "116",
                    time: "2020-02-29 10:52:10",
                    pignumber: "2"
                },
                {
                    id: 6,
                    pigname: "117",
                    time: "2020-02-29 10:52:11",
                    pignumber: "3"
                },
                {
                    id: 7,
                    pigname: "118",
                    time: "2020-02-29 10:52:12",
                    pignumber: "4"
                },
                {
                    id: 8,
                    pigname: "119",
                    time: "2020-02-29 10:52:13",
                    pignumber: "5"
                },
                { id: 9, pigname: "120", time: "2020-02-29 10:52:14", pignumber: "6" }
            ],
            middleimages: [{ id: 0, imgSrc: require("../assets/images/none.png") }],
            Piglist: [
                {
                    id: 0,
                    Pig: "乌金猪",
                    Date: "第1期",
                    Way: "认养",
                    Percentage: "36.00%",
                    Money: "5000.00",
                    Number: "500",
                    Month: "12",
                    Schedule: 89,
                    imgSrc: require("../assets/images/a11.jpg"),
                    imgSrcover: require("../assets/images/a13.png")
                }
            ],

            loading: false,
            finished: false,
            num: 0,
            Orangetrees: [],
            filling: "",
            calculate: 5000.0,
            checkedGroup: 0
        };
    },
    // eslint-disable-next-line space-before-function-paren
    // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
    created() { },

    mounted: function () {
        //初始化页面自执行轻提示框
        this.addtoast();
        //模拟数据接口
        this.MockRequestApi("api/pigList", "", this.icon1, "");
    },
    methods: {
        addtoast() {
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });

            let second = 1;
            const timer = setInterval(() => {
                second--;
                if (second) {
                    toast.message = "加载中...";
                } else {
                    clearInterval(timer);
                    // 手动清除 Toast
                    toast.clear();
                }
            }, 1000);
        },
        //立即抢购
        Buy() {
            Dialog.alert({
                title: "温馨提示",
                message: "您还未实名认证，请先认证再来购买"
            }).then(() => {
                this.$router.push({ path: "/Autonym" });
            });
        },

        //计算数量
        addnumber(num, way) {
            if (way == "") {
                this.calculate = 5000 * num;
                switch (num) {
                    case 5:
                        this.checkedGroup = 5;
                        console.log(this.checkedGroup);
                        break;
                    case 10:
                        this.checkedGroup = 10;
                        break;
                    case 15:
                        this.checkedGroup = 15;
                        break;
                    case 20:
                        this.checkedGroup = 20;
                        break;
                    default:
                        console.log("错误1!");
                        break;
                }
            } else {
                if (num == "") {
                    num = 0;
                }
                if (num > 20) {
                    this.$toast({
                        message: "自选数量最大为20头！"
                    });
                } else {
                    this.calculate = 5000 * num;
                }
            }
        },

        //vant 加载列表方法
        onLoad() {
            // 异步更新数据
            setTimeout(() => {
                for (let i = 0; i < 1; i++) {
                    // this.Piglist.push(this.Piglist.length + 1);
                }
                // 加载状态结束
                this.loading = false;

                // 数据全部加载完成
                if (this.Piglist.length > 0) {
                    this.finished = true;
                }
            }, 500);
        },

        // 名称 部分隐藏

        formatName(name) {
            var newStr;
            if (name.length === 2) {
                // newStr = name.substr(0, 1) + "*";
                newStr = "*" + name.substr(1, 2);
            } else if (name.length > 2) {
                var char = "";
                for (let i = 0, len = name.length - 2; i < len; i++) {
                    char += "*";
                }
                // newStr = name.substr(0, 1) + char + name.substr(-1, 1);
                newStr = "*" + char + name.substr(-1, 1);
            } else {
                newStr = name;
            }
            return newStr;
        },

        //手机号 隐藏
        //     var phone = " 18311110000 ";
        // var regPhone = /^(\d{3})\d{4}(\d{4})$/;
        // console.log(phone .trim().replace(regPhone, "$1****$2"))

        showtoast() {
            this.addtoast();
        },

        //请求模拟数据
        //MockRequestApi  模拟数据接口
        MockRequestApi(
            Url,
            Params,
            icon1Name,
            icon2Name,
            icon3Name,
            icon4Name,
            icon5Name,
            // eslint-disable-next-line no-unused-vars
            Urlimg
        ) {
            this.$https
                .fetchGet(Url, Params)
                .then(res => {
                    //console.log(res);
                    let newData = res.data.data;
                    switch (newData.code) {
                        case 1001:
                            console.log("查询成功!");
                            console.log(newData.result);

                            for (let i = 0; i < newData.result.length; i++) {
                                console.log(newData.result[0]);
                                if (i == 4) {
                                    //icon1
                                    console.log(icon1Name);
                                    for (let j = 0; j < newData.result[i].icon1.length; j++) {
                                        let icon1 = newData.result[i].icon1;
                                        (icon1Name[0].active = require("../assets/images/" +
                                            icon1[j].active +
                                            ".png")),
                                        (icon1Name[0].inactive = require("../assets/images/" +
                                                icon1[j].inactive +
                                                ".png"));
                                        // icon1Name.push({
                                        //   active: require("../assets/images/" +
                                        //     icon1[j].active +
                                        //     ".png"),
                                        //   inactive: require("../assets/images/" +
                                        //     icon1[j].inactive +
                                        //     ".png")
                                        // });

                                        console.log(icon1Name);
                                    }

                                    //icon2
                                    for (let j = 0; j < newData.result[i].icon2.length; j++) {
                                        let icon2 = newData.result[i].icon2;
                                        (icon2Name[0].active = require("../assets/images/" +
                                            icon2[j].active +
                                            ".png")),
                                        (icon2Name[0].inactive = require("../assets/images/" +
                                                icon2[j].inactive +
                                                ".png"));
                                    }

                                    //icon3
                                    for (let j = 0; j < newData.result[i].icon3.length; j++) {
                                        let icon3 = newData.result[i].icon3;
                                        (icon3Name[0].active = require("../assets/images/" +
                                            icon3[j].active +
                                            ".png")),
                                        (icon3Name[0].inactive = require("../assets/images/" +
                                                icon3[j].inactive +
                                                ".png"));
                                    }

                                    //icon4
                                    for (let j = 0; j < newData.result[i].icon4.length; j++) {
                                        let icon4 = newData.result[i].icon4;
                                        (icon4Name[0].active = require("../assets/images/" +
                                            icon4[j].active +
                                            ".png")),
                                        (icon4Name[0].inactive = require("../assets/images/" +
                                                icon4[j].inactive +
                                                ".png"));
                                    }

                                    //icon5
                                    for (let j = 0; j < newData.result[i].icon5.length; j++) {
                                        let icon5 = newData.result[i].icon5;
                                        (icon5Name[0].active = require("../assets/images/" +
                                            icon5[j].active +
                                            ".png")),
                                        (icon5Name[0].inactive = require("../assets/images/" +
                                                icon5[j].inactive +
                                                ".png"));
                                    }
                                }
                            }

                            break;
                        case 1002:
                            console.log("查询失败1!");
                            break;
                        default:
                            console.log("错误1!");
                            break;
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #f6f6f6;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    display: block;
}
div {
    display: block;
    box-sizing: border-box;
}

.TopList {
    width: 100%;
    height: 30px;
    font-size: 16px;
    text-align: left;
    background: #ffffff;
}
.Backlink {
    line-height: 50px;
    margin-left: 10px;
}
.TopList span {
    line-height: 25px;
    margin-left: 110px;
    width: 60%;
}

.van-swipe {
    width: 100%;
    height: 100%;
}

.hello-3 {
    width: 100%;
    height: 200.34px;
    padding: 0 3%;
    padding-top: 10%;
    padding-left: 35%;
    background: #ffffff;
    text-align: left;
}

.hello-3 p {
    margin-top: 10px;
    margin-left: -10px;
    font-size: 16px;
    color: #bbb;
}
.recive {
    width: 30px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    margin-right: 10px;
    color: rgb(233, 92, 111);
    background-color: #fff;
}

.title-name {
    width: 100%;
    height: 65px;
    padding: 0 3%;
    text-align: left;
    background: #ffffff;
    line-height: 85px;
}
.outline {
    width: 100;
    height: 9px;
    background: #f6f6f6;
}
.title-name-h4 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

.lastadd {
    position: fixed;
    bottom: 0px;
    background: #37cd87;
    width: 100%;
    height: 50px;
    color: #fff;
    line-height: 50px;
    font-size: 18px;
}

.gray {
    color: gray;
    opacity: 0.5;
}
.onlygray {
    color: gray;
}
.close {
    display: none;
}

li {
    position: absolute;
}

.active {
    background: #bfd6b6 !important;
}

.hello-4 {
    height: 221.25px;
    border-radius: 10px;
    overflow: hidden;

    background: #ffffff;
    margin-bottom: 10px;
}
.hello-4-top {
    padding-top: 10px;
    padding-left: 10px;
    width: 100%;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 3%;
}

.hello-4-top-left {
    width: 58px;
    height: 58px;
}
.hello-4-top-left img {
    width: 58px;
    height: 58px;
}

.hello-4-top-right {
    width: 106.69px;
    height: 60px;
    text-align: left;
    padding-left: 12px;
}

.hello-4-top-last {
    width: 58px;
    height: 58px;
    margin-left: 105px;
}
.hello-4-top-last img {
    width: 58px;
    height: 58px;
}

.pig {
    width: 100%;
    font-size: 16px;
    color: #333;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.secend {
    display: flex;
    padding-top: 10px;
}
.date {
    width: 36.69px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    background-color: rgb(233, 92, 111);
    color: #fff;
    margin-right: 10px;
}
.recive {
    width: 30px;
    height: 20px;
    text-align: center;
    padding-left: 5px;
    margin-right: 10px;
    color: rgb(233, 92, 111);
    background-color: #fff;
}

.hello-4-bottom {
    width: 100%;
    padding: 3%;
}
.show-one {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: 10px;
}

.color-2 {
    color: #8a8a8a;
    font-size: 14px;
}
.adddistance {
    text-align: center;
    width: 100%;
}
.show-one-1 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    text-align: left;
}
.show-one-2 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    justify-content: flex-start;
}
.show-one-3 {
    width: 33.33%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    padding-left: 65px;
    justify-content: flex-start;
}
.length {
    width: 100%;
    height: 40px;
    padding-top: 20px;
}

.show-one-4 {
    width: 100%;
    height: 20px;
    color: #5bd394;
    text-align: left;
    font-size: 14px;
}
h4 {
    color: #e95c6f;
    font-size: 20px;
    margin-bottom: 5px;
    clear: both;
    width: 100%;
    display: block;
    font-weight: bold;
}

.text-color {
    color: silver;
}
.text-left {
    margin-left: 145px;
}
.choose-num {
    width: 100;
    height: 40px;
    padding-top: 10px;
    text-align: left;
    display: flex;
}
.choose-num span {
    display: flex;
}
.choose-num-1 {
    width: 235px;
    height: 36px;
    line-height: 36px;
    margin-right: 11px;
    color: #555;
    font-size: 16px;
}

.choose-num-2 {
    margin-right: 5px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #f6f6f6;
    padding: 4px 7px;
    font-size: 16px;
    color: #333;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 8px;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
}
.num-List {
    width: 100px;
    height: 32px;
    line-height: 24px;
    border: 0.2px solid #f6f6f6;
    padding: 4px 7px;
    font-size: 12px;
    color: #333;
    border-radius: 5px;
    margin-right: 8px;
    margin-bottom: 8px;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
}
.total-price {
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
}
.total-price-size {
    display: flex;
    font-size: 14px;
}
.total-price-size-2 {
    display: flex;
    font-size: 22px;
    line-height: 55px;
}
.total-price-color {
    color: #ff586d;
}

.hello-1 {
    width: 100%;
    height: 600px;
    background: #f6f6f6;
}
.hello-1 p {
    margin-top: 18px;
    font-size: 15px;
    color: #bbb;
}
.hello-1-img {
    margin-top: 35px;
    margin-left: 148px;
    border-radius: 10px;
    pointer-events: none;
}
.hello-1-details {
    width: 100%;
    height: auto;
}
.hello-1-details-img {
    border-radius: 10px;
    pointer-events: none;
}
.filler {
    width: 100%;
    height: 50px;
}
.record-list {
    width: 100%;
    height: 88px;
    padding: 0 3%;
    display: flex;
    background: #ffffff;
    padding-top: 20px;
    border-bottom: 1px solid #f6f6f6;
}
.record-list-left {
    width: 323px;
    height: 100%;
    display: flex;
}

.record-list-right {
    width: 66px;
    height: 66px;
    display: flex;
    width: 60px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}
.all-list-left {
    width: 123px;
    height: 50px;
    text-align: left;
}
.name-h5 {
    width: 123px;
    color: #555;
    font-size: 16pxm;
    font-weight: 500;
    margin-bottom: 10px;
}
.time-p {
    width: 123px;
    color: #999;
    font-size: 12px;
}

.current-list {
    width: 100%;
    height: 88px;
    padding: 0 3%;
    display: flex;
    background: #ffffff;
    padding-top: 20px;
    border-bottom: 1px solid #f6f6f6;
}
.current-list-left {
    width: 323px;
    height: 100%;
    display: flex;
}

.current-list-right {
    width: 66px;
    height: 66px;
    display: flex;
    width: 60px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
}
.current-list-number {
    height: 22px;
    width: 44px;
    font-size: 18px;
    padding-top: 20px;
    text-align: left;
    color: #333;
    flex: none;
    font-style: oblique;
}
.addactive {
    background: #ff586d;
    border: 0.02667rem solid #ff586d;
    color: #fff;
}
</style>


